<template>
  <div class="goods-detail-main">
    <div class="ceshi" v-for="myList in myLists" :key="myList.id">
      <div class="header">
        <img
          @click="$router.back(-1)"
          :src="require('@/assets/imgs/icons/arr-l.png')"
          alt
          class="head-icon head-search"
        >
        <h2 class="head-zaowu">ZAOWU 造物</h2>
        <div class="head-icons">
          <img :src="require('@/assets/imgs/icons/chat.png')" alt class="head-icon head-chat">
          <router-link
            class="head-icon head-cart"
            tag="img"
            :src="require('@/assets/imgs/icons/cart.png')"
            :to="{name: 'cart',params:{id:myList.id}}"
          ></router-link>
        </div>
      </div>
      <div class="my-swp">
        <swiper
          class="bannerMySwiper"
          :options="bannerSwiperOption"
          ref="mySwiper"
          @someSwiperEvent="callback"
          v-for="myList in myLists"
          :key="myList.id"
        >
          <swiper-slide>
            <router-link
              :to="{name:'commodity'}"
              tag="img"
              :src="myList.img"
              class="bannerMySwiper-img"
            ></router-link>

            <!-- <img  alt class="bannerMySwiper-img"> -->
          </swiper-slide>
        </swiper>
        <div class="goods-lists">
          <p class="goods-name">{{myList.name}}</p>
          <p class="goods-name">{{myList.cname}}</p>
          <p class="goods-money">¥{{myList.monay}}</p>
        </div>

        <div class="msak-bg" v-show="cartIf">
          <div class="goods-cont">
            <div class="goods-cont-top clearfix">
              <img :src="myList.img" alt class="mdds-cont-img">
              <div class="goods-cont-list">
                <p class="goods-item goods-item-name">{{myList.name}}</p>
                <p class="goods-item goods-item-cname">{{myList.cname}}</p>
                <p class="goods-item goods-item-monay">¥{{myList.monay}}</p>
                <p class="goods-item goods-item-last">仅剩{{myList.stock}}件</p>
              </div>
              <!-- <div class="shut" @click="shut">关闭</div> -->
              <img :src="require('@/assets/imgs/icons/shut.png')" alt class="shut" @click="shut">
            </div>
            <div class="goods-color clearfix">
              <p class="goods-color-title">颜色</p>
              <img :src="require('@/assets/imgs/icons/bottom.png')" alt class="goods-color-bot">
              <div class="goods-color-white goodsa-color-sele"></div>
              <div class="goods-color-black goodsa-color-sele"></div>
            </div>
            <div class="goods-color good-stan clearfix">
              <p class="goods-color-title">规格</p>
              <img :src="require('@/assets/imgs/icons/bottom.png')" alt class="goods-color-bot">
              <div class="goods-stan-sml goods-s">s</div>
              <div class="goods-stan-sml goods-m">m</div>
              <div class="goods-stan-sml goods-l">l</div>
            </div>
            <div class="goods-color goods-quantity clearfix">
              <p class="goods-color-title">数量</p>
              <img :src="require('@/assets/imgs/icons/bottom.png')" alt class="goods-color-bot">
              <button
                :disabled="count>=1"
                class="goods-quantity-down goods-quantity-active"
                @click="minusGoods(myList.id)"
              >-</button>
              <div class="goods-quantity-num">{{count}}</div>
              <button
                :disabled="count>=myList.stock"
                class="goods-quantity-up goods-quantity-active"
                @click="plusGoods(myList.id)"
              >+</button>
            </div>
            <button class="goods-enter" @click="jionMy(myList.id,count)">确定</button>

            <!-- <div class="good-stan"></div>
            <div class="goods-quantity"></div>-->
          </div>
        </div>
      </div>

      <div class="foot">
        <!-- <div class="foot-bg"></div> -->
        <div class="foot-bar foot-top">
          <ul class="foot-top-lists">
            <li class="foot-top-item">
              <img :src="require('@/assets/imgs/icons/like.png')" alt class="foot-top-collect">
            </li>
            <li class="foot-top-item">
              <img :src="require('@/assets/imgs/icons/kf.png')" alt class="foot-top-service">
            </li>
            <li class="foot-top-item foot-top-item-bar">
              <div @click="jionCart(0)" class="foot-top-joinCart foot-top-maimai">加入购物车</div>
              <div @click="jionCart(1)" class="foot-top-go foot-top-maimai">立即购买</div>
            </li>
          </ul>
        </div>
        <div class="foot-bar foot-bottom">
          <div class="foot-bottom-lin"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import router from "@/router";
import Mack from "mockjs";

const Random = Mack.Random;
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { constants } from "crypto";

export default {
  name: "Home",

  data() {
    return {
      bannerSwiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
        slidesPerView: 1.3,
        centeredSlides: true
      },
      cartIf: false,
      count: 1,
      type: 0,
      sheetVisible:""
    };
  },
  computed: {
    //共享的数据写在计算属性里
    // goodsItems() {
    //   return this.$store.state.goodsDetaul.goodsList;
    //   // return this.$store.getters['goodsDetaul/goodsList'];
    // },

    myLists() {
      return this.$store.getters["goodsDetaul/myList"];
    }
  },
  components: {
    swiper,
    swiperSlide
    //记得在这里注册组件
  },
  created() {},

  methods: {
    plusGoods(id) {
      this.count++;
      // this.$store.commit("goodsDetaul/getPulsGoods",id);
    },
    minusGoods(id) {
      this.count--;
      // this.$store.commit("goodsDetaul/getMinusGoods",id);
    },
    callback() {},
    jionCart(type) {
      this.type = type;
      this.count = 1;
      this.cartIf = !this.cartIf;
    },
    shut() {
      this.cartIf = !this.cartIf;
    },
    jionMy(id, count) {
      // this.$store.commit("cart/insBuy", id);
      // console.log("id",id)
      if (this.type === 0) {
        this.$store.dispatch("cart/addBuy", { id, count });
      } else if (this.type === 1) {
        this.$store.commit("order/insBuy", { id, count });

        this.$router.push({
          name: "conenterOrder",
          params: {}
        });
      }
      // this.myLists.stock--;
      this.cartIf = !this.cartIf;
    }
  }
};
</script>
<style scoped lang="scss">
@import "@/assets/style/commin.scss";
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateY(500px);
}

.v-enter-active,
.v-leave-active {
  transition: all 1s ease;
}
.msak-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  .goods-cont {
    width: 333px;
    background-color: #fff;
    position: absolute;
    bottom: 44px;
    left: 50%;
    margin-left: -166.5px;
    height: 491px;
    padding: 0 $basPadding;
    text-align: left;
    padding-top: 14px;
    .goods-cont-top {
      position: relative;
      margin-bottom: 26.5px;

      .shut {
        position: absolute;
        top: 0;
        right: 0;
        width: 25px;
        height: 25px;
      }
      .mdds-cont-img {
        width: 114px;
        height: 114px;
        float: left;
        margin-right: 22px;
      }
      .goods-cont-list {
        float: left;
        margin-top: 22px;
        .goods-item {
          margin-bottom: 13px;
          font-size: 12px;
          color: #494949;
        }
        .goods-item-last {
          font-size: 14px;
        }
        .goods-item-monay {
          color: #010e0d;
          font-size: 16px;
        }
      }
    }
    .goods-color {
      position: relative;
      .goods-color-bot {
        position: absolute;
        top: -2px;
        left: 45px;
        width: 16px;
        height: 16px;
      }
      .goodsa-color-sele {
        margin: 16.3px;
        float: left;
        width: 35px;
        height: 35px;
        background-color: #ebe7dc;
        border-radius: 50%;
        box-shadow: 0 2px 5px 0 #e9e9e9;
      }
      .goods-color-black {
        background-color: #101010;
        box-shadow: 0 2px 5px 0 #bfbfbf;
      }
    }
    .good-stan {
      .goods-stan-sml {
        font-size: 16px;
        color: #000;
        margin: 16.3px;
        float: left;
        width: 44px;
        height: 39px;
        line-height: 39px;
        text-align: center;
        box-shadow: 0 2px 5px 0 #e9e9e9;
      }
    }
    .goods-quantity {
      .goods-quantity-active {
        line-height: 24px;
        text-align: center;
        width: 22px;
        height: 24px;
        box-shadow: 0 2px 5px 0 #e9e9e9;
        float: left;
        margin-top: 16.3px;
      }
      .goods-quantity-num {
        line-height: 24px;
        text-align: center;
        margin-top: 16.3px;
        width: 33px;
        height: 24px;
        box-shadow: 0 2px 5px 0 #e9e9e9;
        float: left;
      }
    }

    .goods-enter {
      width: 177px;
      height: 40px;
      background-color: #1c4b47;
      text-align: center;
      line-height: 40px;
      position: absolute;
      bottom: 0;
      left: 50%;
      margin-left: -88.5px;
      color: #fff;
      font-size: 15px;
    }
  }
}
.header {
  display: flex;
  padding: 0 $basPadding;
  justify-content: space-between;
  align-items: center;
  // background-color: pink;
  // margin-bottom: 13.5px;
  width: 100%;
  height: 28px;
  .head-zaowu {
    font-size: 20px;
    color: #000;
    padding-left: 20px;
  }
  .head-icons {
    .head-chat {
      margin-right: 20px;
    }
  }
  .head-icon {
    width: 20px;
    height: 20px;
  }
}
.bannerMySwiper {
  height: 383px;
  .bannerMySwiper-img {
    height: 383px;
  }
}
.goods-lists {
  margin-top: 93px;
  position: relative;
  line-height: 30px;
  .goods-name {
    color: #000;
    font-size: 20px;
  }
  .goods-money {
    color: #000;
    font-size: 24px;
  }
}

.foot {
  position: fixed;
  bottom: 0;
  height: 82.5px;
  width: 100%;
  z-index: 999;
  .foot-bg {
    width: 375px;
    height: 400px;
    background-color: #a6b4a3;
  }
  .foot-bottom-lin {
    width: 134px;
    height: 5px;
    background-color: #000;
    margin: 0 auto;
    margin-top: 20px;
  }
  .foot-bar {
    width: 100%;
    height: 50%;
    padding: 0 $basPadding;
    &.foot-top {
      .foot-top-lists {
        position: relative;
        .foot-top-item {
          float: left;
          .foot-top-collect {
            margin-top: 7px;
            width: 27px;
            height: 27px;
            margin-right: 21px;
          }
          .foot-top-service {
            margin-top: 7px;
            width: 27px;
            height: 27px;
          }
          .foot-top-maimai {
            float: left;
            width: 113px;
            height: 40px;
            border: 1px solid #1c4b47;
            border-radius: 4px;
            text-align: center;
            line-height: 40px;
            color: #1c4b47;
            font-size: 15px;
          }
          .foot-top-joinCart {
            margin-right: 8px;
          }
          &.foot-top-item-bar {
            position: absolute;
            right: 0;
          }
        }
      }
    }
  }
}
</style>


